<template>
  <div>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="category" label="月份" width="180">
          <template #default="scope">
            {{
              scope.row.category 
            
            }}月
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          width="180"
        ></el-table-column>
        
        <el-table-column prop="editTime" label="更新时间">
          <template #default="scope">
            {{ formDataMoment(scope.row.editTime) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="role" label="是否发布" width="180">
          <template #default="scope">
            <el-switch
              v-model="scope.row.isPublish"
              :active-value="1"
              :inactive-value="0"
              @change="publishChange(scope.row)"
            />
          </template>
        </el-table-column> -->
        <el-table-column prop="action" label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleLook(scope.row)"
              >预览</el-button
            >
            <el-button
              type="info"
              size="small"
              @click="handleEdit(scope.row._id)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确认删除吗"
              confirm-button-text="确认"
              cancel-button-text="删除"
              @confirm="handleDelete(scope.row._id)"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog
      v-model="dialogVisible"
      title="新闻预览"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <h2>{{ previewData.title }}</h2>
        <div style="font-size: 12px; color: gray">
          {{ formDataMoment(previewData.editTime) }}
        </div>
      </div>
      <el-divider>
        <el-icon><star-filled /></el-icon>
      </el-divider>
      <div class="content">
        <div v-html="previewData.content"></div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { StarFilled } from "@element-plus/icons-vue";
import axios from "axios";
import moment from "moment";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
moment.locale("zh-cn");
const previewData = ref({});
const formDataMoment = (date) => {
  return moment(date).format("LLLL");
};
const dialogVisible = ref(false);
const tableData = ref([]);
onMounted(() => {
  getTableList();
});
const handleEdit = (id) => {
    router.push(`/newsManage/editNews/${id}`)
}
const handleLook = (data) => {
  previewData.value = data;
  dialogVisible.value = true;
};
const handleDelete = async (id) => {
  let res =await axios.delete(`/adminapi/news/list/${id}`);
  if (res.data.code == 200) {
    ElMessage.success("操作成功");
    getTableList();
  } else {
    ElMessage.error("操作失败");
  }
};
const publishChange = async (item) => {
  let res = await axios.put("/adminapi/news/publish", {
    _id: item._id,
    isPublish: item.isPublish,
  });
  if (res.data.code == 200) {
    ElMessage.success("操作成功");
    getTableList();
  } else {
    ElMessage.error("操作失败");
  }
};
const getTableList = async () => {
  let res = await axios.get("/adminapi/news/list");
  tableData.value = res.data.data;
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  img {
    max-width: 100%;
  }
}
</style>